<template>
  <chart-card :title="'运营概况'" :extraType="'drop'" @changeDate="changeDate">
    <a-row type="flex" justify="space-between">
      <template v-for="item in stastics">
        <stastic-category :key="item.key" :stasticData="item">
        </stastic-category>
      </template>
    </a-row>
  </chart-card>
</template>

<script>
import { StasticCategory } from "./components";
import { ChartCard } from "./components";
import { getOperateSituation } from "@/services/home";
export default {
  name: "OpreateCard",
  data() {
    return {
      stastics: [
        {
          label: "日均运营率",
          num: 3675,
          unit: "%",
          key: "operationRate"
        },
        {
          label: "日均里程",
          num: 3075,
          unit: "km",
          key: "mile"
        },
        {
          label: "日均时长",
          num: 2675,
          unit: "h",
          key: "duration"
        },
        {
          label: "未运营车辆",
          num: 1675,
          unit: "台",
          key: "carOffline"
        }
      ],
      unitMap: ["%", "km", "h", "台"],
      imgKeys: ["operationRate", "mile", "duration", "carOffline"]
    };
  },
  mounted() {
    // this.getOperateSituation();
  },
  components: {
    StasticCategory,
    ChartCard
  },
  props: {
    title: String,
    loading: Boolean,
    type: String
  },
  methods: {
    changeDate(val) {
      console.log(val);
    },
    async getOperateSituation() {
      const {
        data: { data, code }
      } = await getOperateSituation();
      if (code === 200) {
        this.stastics = data;
        this.stastics.forEach((o, i) => {
          o.unit = this.unitMap[i];
          o.key = this.imgKeys[i];
        });
      }
    }
  }
};
</script>

<style scoped lang="less">
</style>
